<template>
  <div class="cart-list">
    <scroll class="scroll" ref="scrollview">
      <cart-list-item
        v-for="(item, index) in getCartList"
        :key="index"
        :item="item"
        @delItem="showDelModal(item.iid)"
      />
    </scroll>
    <action-modal v-show="isShow" @clickEventFn="clickEventFn"></action-modal>
    <!-- {{ getCartList }} -->
    <!-- delGoodsItem(item.iid) -->
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Scroll from "../../../components/common/scroll/Scroll.vue";
import CartListItem from "./CartListItem.vue";
import { StorageFn } from "common/storage";
import ActionModal from "../../../components/content/actionmodal/ActionModal.vue";
export default {
  name: "CartList",
  components: {
    CartListItem,
    Scroll,
    ActionModal,
  },
  data() {
    return {
      storage: null,
      isShow: false,
      item_iid: "",
    };
  },
  created() {
    this.storage = new StorageFn();
  },
  computed: {
    ...mapGetters(["getCartList"]),
  },
  methods: {
    showDelModal(iid) {
      console.log(iid);
      this.item_iid = iid;
      this.isShow = true;
    },
    clickEventFn(type) {
      console.log(type);
      if (type == "confirm") {
        this.delGoodsItem(this.item_iid).then((res) => {
          this.$toast.show(res, 1500);
          this.isShow = false;
        });
      } else {
        this.isShow = false;
      }
    },
    delGoodsItem(iid) {
      let that = this;
      return new Promise((resovle) => {
        this.$store.commit("delGoodsItem", {
          iid,
          fn(res) {
            console.log(that.getCartList);
            that.storage.setLocal("cartList", that.getCartList);
            setTimeout(() => {
              that.$refs.scrollview.scrollRefresh();
              resovle(res);
            }, 10);
          },
        });
      });
    },
  },
  activated() {
    this.$refs.scrollview.scrollRefresh();
    console.log("----hello");
  },
};
</script>

<style scoped>
.cart-list {
  height: 100%;
}
.scroll {
  height: calc(100% - 98px - 40px);
  overflow: hidden;
  position: fixed;
  top: 49px;
  background-color: #f5f5f5;
  /* z-index: 11; */
  /* padding-top: 5px;
  padding-bottom: 5px; */
  box-sizing: border-box;
  width: 100%;
}
</style>